<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getCurrentInstance, redirectTo, showLoading, hideLoading } from '@tarojs/taro';
import { Plus as AppNutIconPlus, Del2 as AppNutIconDel2 } from '@nutui/icons-vue-taro';
import { LOGIN_APP } from '/@/api/modules/base/app-sys-user';
import { COOPERATE_COMPLETE_APP_TASK } from '/@/api/modules/order/app-work-order';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  id: string;
  from?: string;
  assetId?: string;
};

const workOrderReceiveForm = ref();

const state = reactive<{
  /**
   * 备品备件弹出层是否显示
   */
  appSpareListPopupIsShow: boolean;
}>({
  appSpareListPopupIsShow: false,
});

const formState = reactive<{
  workOrderEventDto: AppSysWorkOrder.eventDto;
  workOrderDto: AppSysWorkOrder.Dto;
}>({
  workOrderEventDto: {
    workOrderId: '',
    handleUserId: '',
    handleUserName: '',
    handleTime: undefined,
    opinion: '',
    workOrderEventFileDto: [],
  },
  workOrderDto: {
    id: '',
    workOrderPreAssetDto: [],
  },
});

/**
 * @function 上传文件
 * @param imgList
 */
function uploadImageChange(imgList: { key: string; src: string }[]) {
  formState.workOrderEventDto.workOrderEventFileDto = imgList.map((i) => {
    return {
      fileType: 1,
      fileUrl: i.src,
      fileName: i.src.split('/').reverse()[0],
    };
  }) as AppSysWorkOrder.eventFileDto[];
}

function submit() {
  showLoading();

  LOGIN_APP().then((res) => {
    formState.workOrderDto.id = params.id;
    formState.workOrderEventDto.workOrderId = params.id;
    formState.workOrderEventDto.handleUserId = res.sysUserDto.id;
    formState.workOrderEventDto.handleUserName = res.sysUserDto.name;
    formState.workOrderEventDto.handleTime = new Date().valueOf();

    COOPERATE_COMPLETE_APP_TASK(formState).then(() => {
      formState.workOrderEventDto = {
        workOrderId: '',
        handleUserId: '',
        handleUserName: '',
        handleTime: undefined,
        opinion: '',
        workOrderEventFileDto: [],
      };
      formState.workOrderDto = {
        id: '',
        workOrderPreAssetDto: [],
      };

      hideLoading();
      const url = `/pages/work-order/cooperate-complete-success/index?id=${params.id}`;
      redirectTo({
        url: params.from ? url + `&from=${params.from}&assetId=${params.assetId}` : url,
      });
    });
  });
}
</script>

<template>
  <view class="work-order-cooperate-complete app-page--1">
    <app-navbar title="处理" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="work-order-cooperate-complete__wrapper">
        <nut-form
          :model-value="formState"
          class="work-order-cooperate-complete__form"
          ref="workOrderReceiveForm"
        >
          <nut-form-item class="nut-form__title-wrapper" label="处理说明" />
          <nut-form-item>
            <nut-textarea
              v-model="formState.workOrderEventDto.opinion"
              placeholder="请输入处理说明"
              rows="8"
              limit-show
              text-align="left"
              max-length="200"
            />
          </nut-form-item>
          <nut-form-item v-if="false" label="上传图片" />
          <nut-form-item v-if="false" label-width="0">
            <app-upload-image @on-change="uploadImageChange" height="120px" />
          </nut-form-item>
        </nut-form>
        <nut-cell-group v-if="false">
          <nut-cell class="work-order-cooperate-complete__pre-asset-table">
            <view class="work-order-cooperate-complete__pre-asset-table-header">
              <view class="work-order-cooperate-complete__pre-asset-table-header--name">
                <text>备品名称</text>
              </view>
              <view class="work-order-cooperate-complete__pre-asset-table-header--number-input">
                <text>数量</text>
              </view>
              <view class="work-order-cooperate-complete__pre-asset-table-header--handle">
                <text>操作</text>
              </view>
            </view>
            <view
              v-for="(item, index) in formState.workOrderDto.workOrderPreAssetDto"
              :key="item.assetId"
              class="work-order-cooperate-complete__pre-asset-table-row"
            >
              <view class="work-order-cooperate-complete__pre-asset-table-row--name">{{
                item.assetName || '-'
              }}</view>
              <view class="work-order-cooperate-complete__pre-asset-table-row--number-input">
                <nut-input-number v-model="item.number" :min="1" />
              </view>
              <view class="work-order-cooperate-complete__pre-asset-table-row--handle">
                <app-nut-icon-del2
                  class="work-order-cooperate-complete__pre-asset-table-row__del-btn"
                  @click="formState.workOrderDto.workOrderPreAssetDto?.splice(index, 1)"
                />
              </view>
            </view>
            <view
              class="work-order-cooperate-complete__no-pre-asset"
              v-if="
                !formState.workOrderDto.workOrderPreAssetDto ||
                !formState.workOrderDto.workOrderPreAssetDto?.length
              "
            >
              暂无数据
            </view>
          </nut-cell>
          <nut-cell>
            <nut-button
              class="work-order-cooperate-complete__add-pre-asset-btn"
              block
              plain
              shape="round"
              type="primary"
              @click="state.appSpareListPopupIsShow = !state.appSpareListPopupIsShow"
            >
              <template #icon>
                <app-nut-icon-plus />
              </template>
              添加备品
            </nut-button>
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
    <view class="work-order-cooperate-complete__footer">
      <nut-button block type="info" @click="submit">
        <text>提交</text>
      </nut-button>
    </view>

    <app-spare-list-popup
      v-model="state.appSpareListPopupIsShow"
      @on-selected="(item: AppSysSpare.Dto) => {
      formState.workOrderDto.workOrderPreAssetDto?.push({
        workOrderId: params.id,
        assetId: item.id,
        assetCode: item.spareCode,
        assetName: item.spareName,
        number: 1,
        modelName: item.model,
        unit: item.unitName,
        unitPrice: item.price ? Number(item.price) * 100 : 0,
      })
    }"
    />
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
